<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:21
-->
<template>
  <div>
    <!-- 头部开始 -->
    <Header></Header>
    <Nav></Nav>
    <!-- 头部结束 -->

    <!-- 体部开始 -->

    <!-- 轮播图模块 -->
    <div class="news_swipe">
      <div class="wrapper">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in swipes" :key="item.id">
            <img :src="item.url" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 文章模块 -->
    <div class="news_article">
      <div class="wrapper">
        <div class="catgory" v-for="(cat, index) in categories" :key="index">
          <!-- 上盒子 -->
          <div class="top">
            <div class="left">
              <h3>{{ cat.category.name }}</h3>
            </div>
            <div class="right">
              <span>
                <a
                  href="javascript:;"
                  v-if="index <= 2"
                  @click="moreArticle(cat.category)"
                  >更多>></a
                >
                <a
                  href="javascript:;"
                  v-else
                  @click="moreArticle(cat.category)"
                >
                  <img src="@/assets/yxtx/more_log.png" alt="" /> 更多</a
                >
              </span>
            </div>
          </div>
          <!-- 下盒子 -->
          <div class="bottom">
            <!-- 非头条盒子 -->
            <ul v-if="index > 0">
              <li
                @click="toList(item.id)"
                v-for="item in allArticles[index]"
                :key="item.id"
              >
                <img src="@/assets/yxtx/aticel_logo.jpg" alt="" />
                {{ item.title }}
              </li>
            </ul>
            <!-- 头条盒子 -->
            <!-- 轮播图是384 250 -->
            <el-carousel v-if="index == 0" class="lunbo">
              <el-carousel-item
                v-for="item in cat.aritcle"
                :key="item.id"
                class="lunbo_item"
              >
                <div class="content" @click="toList(item.id)">
                  <img :src="item.cover" alt="" />
                  <h4 class="blue1">{{ item.title }}</h4>
                  <!-- <p v-html="item.content"></p> -->
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部跳转栏 -->

    <!-- 体部结束 -->

    <!-- 底部开始 -->
    <Footer></Footer>
    <!-- 底部结束 -->
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      swipes: [],
      categories: [],
      yaowen: {},
      parmas: {
        page: 1,
        pageSize: 8,
      },
      allArticles: [],
    };
  },
  methods: {
    // 获取轮播图数据
    async getSwipes() {
      let res = await get("/index/carousel/findAll");
      this.swipes = res.data;
    },
    // 获取所有新闻分类
    async getCategories() {
      let res = await get("/index/article/findCategoryArticles");
      this.categories = res.data;
      // console.log(this.categories);
      //分页查询，给每个类别文章都展示8条数据
      this.getArticles();
    },

    // 跳转到文章详情页
    toList(id) {
      // console.log(id);
      // 采用编程式路由跳转
      this.$router.push({
        path: "/list",
        query: { id },
      });
    },
    // 跳转到文章分类页
    moreArticle(category) {
      if (category.name === "新闻头条") {
        this.$router.push({
          path: "/category",
          query: {
            id: 4,
            name: "学校要闻",
          },
        });
      } else {
        this.$router.push({
          path: "/category",
          query: category,
        });
      }
    },
    // 分页查询每个分类的8条新闻数据
    async getArticles() {
      // let res = await get("/index/article/pageQuery", this.parmas);
      for (var i = 0; i < this.categories.length; i++) {
        // console.log(this.categories[i].category.id);
        this.parmas.categoryId = this.categories[i].category.id;
        let res = await get("/index/article/pageQuery", this.parmas);
        this.allArticles.push(res.data.list);
      }
      // console.log(this.allArticles);
    },
  },
  created() {
    // 获取轮播图数据
    this.getSwipes();
    // 获取所有分类数据
    this.getCategories();
  },
};
</script>

<style lang="scss" >
// 轮播图
.news_swipe {
  margin-top: 20px;
  width: 100%;
  height: 400px;
  overflow: hidden;
  .wrapper {
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

// 文章模块
.news_article {
  margin-top: 40px;
  width: 100%;
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    .catgory {
      width: 384px;
      height: 383px;
      margin-right: 24px;
      margin-bottom: 40px;

      .top {
        box-sizing: border-box;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #a94c18;
        img {
          vertical-align: middle;
        }
        .left {
          h3 {
            font-size: 20px;
            font-weight: 400;
            padding: 0;
            margin: 0;
            line-height: 40px;
            color: #333;
          }
        }
        .right {
          span {
            a {
              font-size: 14px;
              color: #888;
              line-height: 40px;
            }
            a:hover {
              text-decoration: underline;
            }
          }
        }
      }
      .bottom {
        padding: 20px 15px 0 15px;
        box-sizing: border-box;
        border-left: 1px solid #eee;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        height: 343px;
        ul {
          li {
            font-size: 14px;
            color: #222;
            margin-bottom: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: "宋体";
            line-height: 25px;
          }
          li:hover {
            color: #a94c18;
            cursor: pointer;
            text-decoration: underline;
          }
        }
        .lunbo {
          img {
            width: 100%;
            height: 250px;
          }
        }
      }
    }
    .catgory:nth-child(1) {
      .top {
        border-bottom: 2px solid #698b00;
      }
      .bottom {
        padding: 0;
        padding-top: 1px;
        position: relative;
        .lunbo {
          position: relative;
          height: 343px;
          width: 100%;
          .lunbo_item {
            width: 100%;
            height: 343px;
          }
          ul {
            position: absolute;
            bottom: 99px;
            left: 343px;
            width: 70px;
            li {
              width: 12px;
              height: 12px;
              padding-bottom: 0;
              margin-bottom: 0;
              margin-right: 2px;

              button {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: #fff;
              }
            }
          }
          .content {
            width: 100%;
            height: 343px;
            h4 {
              text-align: center;
              font-size: 16px;
              margin: 0;
              padding: 0;
            }
            // p {
            //   position: absolute;
            //   bottom: 0;
            //   text-indent: 2em;
            //   font-size: 16px;
            //   width: 100%;
            //   height: 50px;
            //   background: pink;
            //   overflow: hidden;
            //   font-size: 12px;
            //   p {
            //     margin-top: 10px;
            //   }
            // }
          }
        }
      }
    }
    .catgory:nth-child(3n) {
      margin-right: 0;
    }
    .catgory:nth-child(n + 4) {
      .top {
        border-bottom: 1px solid #ddd;
        img {
          vertical-align: middle;
        }
        .left {
          h3 {
            font-size: 16px;
            font-weight: 400;
            padding: 0;
            margin: 0;
            line-height: 40px;
          }
        }
        .right {
          span {
            a {
              font-size: 14px;
              color: #888;
              line-height: 40px;
            }
            a:hover {
              text-decoration: underline;
              color: #a94c18;
            }
          }
        }
      }
    }
  }
}

// 两种颜色
.blue1 {
  color: #551a8b;
}
</style>